<template>
  <PageWrapper contentFullHeight contentClass="flex">
    <a-layout :style="{ width: '100%' }">
      <a-layout-header class="m-b-1" style="padding: 0px">
        <div class="p-l-5 p-r-5 bg-blue-200 border-1 border-dashed border-blue-300">
          <a-flex align="center" justify="space-between" horizontal>
            <a-input-search
              style="width: 580px"
              v-model:value="value"
              placeholder="请输入身份证号"
              @search="onSearch"
            >
              <template #enterButton> <IdcardOutlined />刷身份证 </template>
            </a-input-search>
            <a-space>
              <a-button>关闭</a-button>
              <a-button>重置</a-button>
              <a-button type="primary">
                <template #icon><SaveOutlined /></template>
                提交
              </a-button>
            </a-space>
          </a-flex>
        </div>
      </a-layout-header>
      <a-layout-content class="w-full flex">
        <div class="w-12/24 m-r-2 bg-white">
          <CollapseContainer class="p-1">
            <template #title><UserOutlined /> 基本信息 </template>
            <a-form :labelCol="{ span: 6, offset: 0 }" labelAlign="right" colon>
              <a-row :gutter="24">
                <a-col span="12">
                  <a-form-item label="姓名" name="username" required>
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="民族" name="username">
                    <a-select>
                      <option value="汉族">汉族</option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="性别" name="username" required>
                    <a-select>
                      <option value="女">女</option>
                      <option value="男">男</option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="年龄" name="username" required>
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="生日" name="username" required>
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="婚姻" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="联系电话" name="username" required>
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="户籍地址" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="省份" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="城市" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="区县" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="乡镇" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="街道" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item label="现居地址" name="username">
                    <a-input />
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="药物过敏" name="username" :labelCol="{ span: 3, offset: 0 }">
                    <a-checkbox-group>
                      <a-checkbox
                        :value="option.id"
                        v-for="(option, index) in yygmOptions"
                        :key="index"
                        class="w-32"
                      >
                        {{ option.datainfo }}
                      </a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="人群分类" name="username" :labelCol="{ span: 3, offset: 0 }">
                    <a-checkbox-group>
                      <a-checkbox
                        :value="option.id"
                        v-for="(option, index) in rqflOptions"
                        :key="index"
                        class="w-32"
                      >
                        {{ option.datainfo }}
                      </a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="血型" name="username" :labelCol="{ span: 3, offset: 0 }">
                    <a-checkbox-group>
                      <a-checkbox
                        :value="option.id"
                        v-for="(option, index) in xxOptions"
                        :key="index"
                        class="w-32"
                      >
                        {{ option.datainfo }}
                      </a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </CollapseContainer>
          <CollapseContainer class="p-1">
            <template #title> <PaperClipOutlined />档案信息 </template>
          </CollapseContainer>
        </div>
        <div class="w-12/24">
          <div class="h-94% bg-white p-4">
            <div class="w-full flex">
              <div class="w-10/24">
                <a-space :size="26">
                  <div class="flex-row text-center">
                    <a-avatar
                      :size="86"
                      shape="square"
                      :style="{
                        backgroundColor: '#fff',
                        color: '#999',
                        border: '1px  dashed #999',
                      }"
                      v-show="false"
                    >
                      <template #icon><IdcardOutlined /></template>
                    </a-avatar>
                    <a-image
                      :width="86"
                      class="rounded-2"
                      :src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png`"
                    />
                    <div class="p-2 space-x-1">
                      <IdcardOutlined />
                      <span>证件照</span>
                    </div>
                  </div>
                  <div class="flex-row text-center">
                    <a-avatar
                      :size="86"
                      shape="square"
                      :style="{
                        backgroundColor: '#fff',
                        color: '#999',
                        border: '1px  dashed #999',
                      }"
                    >
                      <template #icon><CameraOutlined /></template>
                    </a-avatar>
                    <div class="p-2 space-x-1">
                      <CameraOutlined />
                      <span>拍摄照片</span>
                    </div>
                  </div>
                </a-space>
              </div>
              <div class="w-14/24 border-l-1 border-slate-200 p-l-4 flex tems-center">
                <div class="py-12">
                  <span>套餐选择：</span>
                  <a-select
                    ref="select"
                    v-model:value="value1"
                    style="width: 300px"
                    @focus="focus"
                    @change="handleChange"
                  >
                    <template #addonBefore>
                      <PrinterOutlined />
                      <span class="m-l-1">打印次数</span>
                    </template>
                    <a-select-option value="老年人体检套餐">老年人体检套餐</a-select-option>
                  </a-select>
                </div>
              </div>
            </div>
            <a-divider />
            <a-table :dataSource="dataSource" :columns="columns" size="small" bordered />
          </div>
          <div class="h-6% bg-white p-2 border-t-1 border-slate-200">
            <a-space>
              <a-input-number v-model:value="value2" addon-after="张" style="width: 100%">
                <template #addonBefore>
                  <PrinterOutlined />
                  <span class="m-l-1">打印次数</span>
                </template>
              </a-input-number>
            </a-space>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PageWrapper } from "@/components/Page";
import { CollapseContainer } from "@/components/Container/index";
import {
  SaveOutlined,
  CameraOutlined,
  IdcardOutlined,
  UserOutlined,
  PaperClipOutlined,
  PrinterOutlined,
} from "@ant-design/icons-vue";

const dataSource = ref([
  {
    key: "1",
    name: "甲功五项",
    age: 32,
  },
  {
    key: "2",
    name: "心电图检查",
    age: 42,
  },
  {
    key: "3",
    name: "高密度脂蛋白",
    age: 42,
    address: "西湖区湖底公园1号",
  },
  {
    key: "4",
    name: "低密度脂蛋白",
    age: 42,
  },
  {
    key: "5",
    name: "腹部彩超",
    age: 42,
  },
  {
    key: "6",
    name: "腹部彩超",
    age: 42,
  },
  {
    key: "6",
    name: "腹部彩超",
    age: 42,
  },
  {
    key: "6",
    name: "腹部彩超",
    age: 42,
  },
  {
    key: "6",
    name: "腹部彩超",
    age: 42,
  },
  {
    key: "6",
    name: "腹部彩超",
    age: 42,
  },
  {
    key: "6",
    name: "腹部彩超",
    age: 42,
  },
]);

const columns = ref([
  {
    title: "序号",
    dataIndex: "key",
    key: "key",
  },
  {
    title: "项目名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "项目单价",
    dataIndex: "age",
    key: "age",
  },
]);

const yygmOptions = [
  {
    id: "DM02-10_1_101",
    datanum: "101.0",
    datainfo: "青霉素",
    parentid: "DM02-10_1",
    memo: null,
    sort: "2",
  },
  {
    id: "DM02-10_1_102",
    datanum: "102.0",
    datainfo: "磺胺",
    parentid: "DM02-10_1",
    memo: null,
    sort: "3",
  },
  {
    id: "DM02-10_1_103",
    datanum: "103.0",
    datainfo: "头孢类抗生素",
    parentid: "DM02-10_1",
    memo: null,
  },
  {
    id: "DM02-10_1_104",
    datanum: "104.0",
    datainfo: "含碘药品",
    parentid: "DM02-10_1",
    memo: null,
    sort: "5",
  },
  {
    id: "DM02-10_1_105",
    datanum: "105.0",
    datainfo: "酒精",
    parentid: "DM02-10_1",
    memo: null,
    sort: "6",
  },
  {
    id: "DM02-10_1_106",
    datanum: "106.0",
    datainfo: "镇静麻醉剂",
    parentid: "DM02-10_1",
    memo: null,
  },
  {
    id: "DM02-10_1_198",
    datanum: "198.0",
    datainfo: "链霉素",
    parentid: "DM02-10_1",
    memo: null,
    sort: "8",
  },
  {
    id: "DM02-10_1_199",
    datanum: "199.0",
    datainfo: "其他",
    parentid: "DM02-10_1",
    memo: null,
    sort: "9",
  },
];
const rqflOptions = [
  {
    id: "DM102-11_1",
    datanum: "1",
    datainfo: "老年人",
    parentid: "DM102-11",
    memo: null,
    sort: "1",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_2",
    datanum: "2",
    datainfo: "孕产妇",
    parentid: "DM102-11",
    memo: null,
    sort: "2",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_3",
    datanum: "3",
    datainfo: "儿童",
    parentid: "DM102-11",
    memo: null,
    sort: "3",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_4",
    datanum: "4",
    datainfo: "残疾人",
    parentid: "DM102-11",
    memo: null,
    sort: "4",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_5",
    datanum: "5",
    datainfo: "高血压患者",
    parentid: "DM102-11",
    memo: null,
    sort: "5",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_6",
    datanum: "6",
    datainfo: "糖尿病患者",
    parentid: "DM102-11",
    memo: null,
    sort: "6",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_7",
    datanum: "7",
    datainfo: "严重精神障碍患者",
    parentid: "DM102-11",
    memo: null,
    sort: "7",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_8",
    datanum: "8",
    datainfo: "慢阻肺",
    parentid: "DM102-11",
    memo: null,
    sort: "8",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_9",
    datanum: "9",
    datainfo: "脑卒中患者",
    parentid: "DM102-11",
    memo: null,
    sort: "9",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_10",
    datanum: "10",
    datainfo: "冠心病患者",
    parentid: "DM102-11",
    memo: null,
    sort: "10",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_11",
    datanum: "11",
    datainfo: "暂未分类",
    parentid: "DM102-11",
    memo: null,
    sort: "11",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_12",
    datanum: "12",
    datainfo: "一般人群",
    parentid: "DM102-11",
    memo: null,
    sort: "12",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_13",
    datanum: "13",
    datainfo: "计划生育特殊家庭",
    parentid: "DM102-11",
    memo: null,
    sort: "13",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_14",
    datanum: "14",
    datainfo: "卡外贫困户",
    parentid: "DM102-11",
    memo: null,
    sort: "14",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_15",
    datanum: "15",
    datainfo: "低保户",
    parentid: "DM102-11",
    memo: null,
    sort: "15",
    gb: null,
    num: 0,
  },
  {
    id: "DM102-11_16",
    datanum: "16",
    datainfo: "建档立卡贫困户",
    parentid: "DM102-11",
    memo: null,
    sort: "16",
    gb: null,
    num: 0,
  },
];
const xxOptions = [
  {
    id: "DM01-12_1",
    datanum: "1",
    datainfo: "A型",
    parentid: "DM01-12",
    memo: null,
    sort: "1",
    gb: null,
    num: 0,
  },
  {
    id: "DM01-12_2",
    datanum: "2",
    datainfo: "B型",
    parentid: "DM01-12",
    memo: null,
    sort: "2",
    gb: null,
    num: 0,
  },
  {
    id: "DM01-12_3",
    datanum: "3",
    datainfo: "O型",
    parentid: "DM01-12",
    memo: null,
    sort: "3",
    gb: null,
    num: 0,
  },
  {
    id: "DM01-12_4",
    datanum: "4",
    datainfo: "AB型",
    parentid: "DM01-12",
    memo: null,
    sort: "4",
    gb: null,
    num: 0,
  },
  {
    id: "DM01-12_5",
    datanum: "5",
    datainfo: "不详",
    parentid: "DM01-12",
    memo: null,
    sort: "5",
    gb: null,
    num: 0,
  },
];
</script>

<style scoped></style>
